<template>
  <ElDialog v-model="showSearch" :show-close="false" title="返回" :width="'40%'">
    <template #header>
        <div class="title_sty" @click="back">{{ '< 返回' }}</div>
    </template>
    <div class="content">
        <div class="content_title">
            <div class="des">欢迎登录</div>
            <div class="des_second">请选择需要进入的平台</div>
        </div>
        <div class="idList">
            <div class="item" v-for="(item, index) in idList" :key="index">
                <div class="item_img">
                    <img src="@/assets/imgs/logo.png" alt="" srcset="" />
                </div>
                <div class="item_title">{{ item.name }}</div>
                <div class="item_btn" @click="selectId(item.id)">
                    <img src="@/assets/imgs/arrow_right_gray.png" alt="" srcset="" />
                </div>
            </div>
        </div>
    </div>
  </ElDialog>
</template>

<script lang="ts" setup>
const showSearch = ref(false) // 是否显示弹框
const emit = defineEmits(['handleOk'])

const idList = ref([
    { id: 1, name: '运营管理平台' },
    { id: 2, name: '供应商管理平台' },
    { id: 3, name: '省代理管理平台' },
    { id: 4, name: '市代理管理平台' }
])

const openDialog = () => {
  showSearch.value = true
}
const closeDialog = () => {
  showSearch.value = false
}
const back = () => {
  showSearch.value = false
  emit('handleOk')
}
const selectId = (id: number) => {
  console.log(id)
}
defineExpose({
  openDialog,
  closeDialog
})
</script>
<style lang="scss" scoped>
    .title_sty{
        font-size: 16px;
        color: #00abfd;
        cursor: pointer;
    }
    .content{
        width: 100%;
    }
    
    .content_title{
        width: 100%;
        height: 100px;
    }
    .des{
        font-size: 18px;
        font-weight: 500;
        color: #666;
        margin-left: 10px;
    }
    .des_second{
        font-size: 12px;
        color: #999;
        margin-left: 10px;
        margin-top: 10px;
    }
    .idList{
        width: 90%;
        height: 300px;
        margin-left: 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    /* 隐藏滚动条但仍然可以滚动 */
    ::-webkit-scrollbar {
        display: none; /* 对于WebKit浏览器 */
    }
    .item{
        width: 80%;
        min-height: 90px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #e0e0e0;
        border-radius: 10px;
        cursor: pointer;
        border: 1px solid #e0e0e0;
        margin-bottom: 20px;
    }
    .item:hover{
        border-color: #00abfd;
    }
    .item_img{
        width: 25%;
        height: 80px;
        img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .item_title{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        height: 100%;
        color: #666;
    }
    .item_btn{
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 40px;
            height: 40px;
        }
    }
</style>